<script setup lang="ts">
import {RouterView, useRoute} from 'vue-router'
import Header from "@/components/Header.vue";
import Login from "@/views/Login.vue";
import LeftMenu from "@/components/LeftMenu.vue";
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import moment from "moment";
import router from "@/router";

moment.locale('zh-cn')
const route = useRoute();

// 全局前置路由
// router.beforeEach((to,form,next)=>{
//   // 不存在路由信息
//   if(to.matched.length) {
//     // 拦截跳转，指定导航到404提示页面
//     next("/404")
//   } else {
//     // 存在路由信息，执行导航
//     next()
//   }
// })
</script>
<template>
  <a-config-provider :locale="zhCN">
    <div class="box">
      <!-- 判断地址-->
      <div class="box-main" v-if="route.path !== '/'">
        <Header/>
        <div class="box-left">
          <LeftMenu/>
        </div>
        <div class="box-right">
          <router-view v-slot="{ Component, route }">
            <transition name="router">
              <component :is="Component" :key="route.path"/>
            </transition>
          </router-view>
        </div>
      </div>
      <div class="box-login" v-else>
        <Login/>
      </div>
    </div>
  </a-config-provider>
</template>

<style scoped lang="less">
.main {
  width: 100%;
}

.box-login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.box-main {
  margin-top: 62px;
  overflow: hidden;
}

.box-left {
  width: 200px;
  float: left;
  margin-right: 30px;
  position: fixed;
  left: 0;
  top: 62px;
}

.box-right {
  padding-top: 10px;
  margin-left: 230px;
  width: calc(100% - 230px);
  min-height: calc(100vh - 62px);
  overflow: hidden;
  float: left;
  box-sizing: border-box;
  padding-right: 30px;
  background: #FFFFFF;
}

//离开动画开始
//进入动画結束
.router-enter-to,
.router-leave-from {
  transform: translateX(0px);
}

//离开动画生效
//进入动画生效
.router-leave-active, .router-enter-active {
  transition: transform 0.5s;
}

//离开动画结束
//进入动画起始
.router-enter-from,
.router-leave-to {
  transform: translateX(100px);
}

</style>